<template>
	<!-- “-”短横杠形式，需要用引号 -->
	<view class="my-search-container" :style='{"background-color":myColor}' @click="tapou">
		<!-- 
		 可以自定义圆角尺寸和背景颜色
		 -->
		<!-- 用view模拟输入框 -->
		<view class="my-search-box" :style='{borderRadius: myRadius + "px"}'>
			<uni-icons type="search"></uni-icons>
			<text class="placeholder">搜索</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-search",
		data() {
			return {
				// myColor:'blue',
				// myRadius:5
			};
		},
		// 1.数组形式，不对数据类型进行限制
		// props:['myColor']
		// 2.对象形式
		props:{
			// 限制类型
			// myColor:String
			// 多个可能值
			// myColor:[String,Number]
			// 数据类型、默认值、是否必须
			myColor:{
				type:String,
				required:false,
				default:'#c00000'
			},
			myRadius:{
				type:[String,Number],
				required:false,
				default:15
			}
		},
		methods:{
			// 自定义事件
			tapou(){
				this.$emit('mySearch')
			}
		}
	}
</script>

<style lang="scss">
	.my-search-container {
		// background-color: #c00000;
		height: 50px;
		padding: 0 10px;
		display: flex;
		align-items: center;
	}

	.my-search-box {
		height: 36px;
		background-color: #ffffff;
		// border-radius: 15px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.placeholder {
			font-size: 15px;
			margin-left: 5px;
		}
	}
</style>
